<template>
  <div idm-ctrl="idm_module" :id="moduleObject.id" :idm-ctrl-id="moduleObject.id" class="dialogbox">
    <div class="dialogmsg-box" v-if="dialogVisible">
      <div class="dialogmsg-mask"></div>
      <div class="dialog-center" v-drag>
        <div class="dialog-close" @click="handleClose"></div> 
        <div class="dialog-p" v-if="propData.titleShow">{{ handleTitle() }}</div>
        <div class="dialog-btn" v-if="propData.btnShow" @click="handleClick">{{ propData.btnText }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IDialogMsg',
  data () {
    return {
      moduleObject: {},
      pageObj: {},
      dialogVisible: false,
      propData: this.$root.propData.compositeAttr || {
        titleShow: true,
        maskColor: {
          hex8: "#00000033",
        },
        title: '您本年度工作报告已生成！',
        titlePosition: '30%',
        btnPosition: '10%',
        btnText: '立即前往',
        width: '484px',
        height: '340px',
        btnwidth: '100px',
        btnheight: '32px',
        btnMrg: '13px'
      }
    }
  },
  directives: {
    drag(el, binding) {
      console.log(el)
      el.onmousedown = function(ev) {
        let x = ev.clientX - el.offsetLeft;
        let y = ev.clientY - el.offsetTop;
        el.onmousemove = function(ev) {
          let overx = ev.clientX - x + 'px';
          let overy = ev.clientY - y + 'px';
          el.style.left = overx;
          el.style.top = overy;
        }
        el.onmouseup = function(ev) {
          el.onmousemove = el.onmouseup = null;
        }
        return false;
      }
    }
  },
  mounted() {
    this.moduleObject = this.$root.moduleObject;
    this.init()
  },
  methods: {
    handleTitle () {
      let title = '';
      if (this.pageObj[this.propData.titleField]) {
        title = this.pageObj[this.propData.titleField]
      } else {
        title = this.propData.title
      }
      return title;
    },
    handleStyle () {
      let styleObject = {},
        styleliObj = {},
        btnStyleObj = {},
        maskObject = {};
      for (const key in this.propData) {
        if (this.propData.hasOwnProperty.call(this.propData, key)) {
          const element = this.propData[key]
          if (!element && element !== false && element != 0) {
            continue
          }
          switch (key) {
            case 'width':
              styleObject['width'] = element;
              break
            case 'height':
              styleObject['height'] = element;
              break
            case 'ulbox':
              IDM.style.setBoxStyle(styleObject, element);
              break
            case 'bgColor':
              styleObject['background-color'] = element && element.hex8;
              break
            case 'boxShadow':
              styleObject['box-shadow'] = element;
              break
            case 'bgbox':
              styleObject['background'] = `url(${IDM.url.getWebPath(element)}) no-repeat`;
              styleObject['background-size'] = '100% 100%';
              break
            case 'boxBorder':
              IDM.style.setBorderStyle(styleObject, element);
              break
            case 'dialogIndex':
              styleObject['z-index'] = element;
              break
            case 'maskColor':
              maskObject['background-color'] = element && element.hex8;
              break
            case 'titlePosition':
              styleliObj['bottom'] = element;
              break
            case 'titleFont':
              IDM.style.setFontStyle(styleliObj, element);
              break
            case 'btnwidth':
              btnStyleObj['width'] = element;
              break
            case 'btnheight':
              btnStyleObj['height'] = element;
              btnStyleObj['line-height'] = element;
              break
            case 'btnBg':
              btnStyleObj['background'] = `url(${IDM.url.getWebPath(element)}) no-repeat`;
              btnStyleObj['background-size'] = '100% 100%';
              break
            case 'btnPosition':
              btnStyleObj['bottom'] = element;
              break
            case 'btnFont':
              IDM.style.setFontStyle(btnStyleObj, element);
              break
            case 'btnMrg':
              btnStyleObj['padding-left'] = element;
              break
          }
        }
      }
      window.IDM.setStyleToPageHead(this.moduleObject.id + " .dialogmsg-mask", maskObject);
      window.IDM.setStyleToPageHead(this.moduleObject.id + " .dialog-center", styleObject);
      window.IDM.setStyleToPageHead(this.moduleObject.id + " .dialog-p", styleliObj);
      window.IDM.setStyleToPageHead(this.moduleObject.id + " .dialog-btn", btnStyleObj);
    },
    handleClick () {
      if (this.propData.customClick && this.propData.customClick.length > 0) {
        let name = this.propData.customClick[0].name
        window[name] && window[name].call(this);
      }
    },
    handleClose () {
      this.closeMyDialog();
      this.dialogVisible = false;
    },
    // 过滤接口参数
    fileterParams() {
      let obj = {};
      if (this.propData.customFunc && this.propData.customFunc.length > 0) {
        let name = this.propData.customFunc[0].name
        obj = window[name] && window[name].call(this);
      }
      return obj
    },
    initData () {
      if (this.moduleObject.env == "production") {
        if (this.propData.dataSource && this.propData.dataFlag) {
          const routerParams = this.fileterParams();
          IDM.datasource.request(this.propData.dataSource[0]?.id, {
            moduleObject: this.moduleObject,
            param: { ...routerParams }
          }, (data) => {
            if (data) {
              this.pageObj = data;
              this.dialogVisible = this.pageObj[this.propData.showDialog];
              console.log(this.dialogVisible, this.pageObj, this.propData.showDialog, 999);
              if (this.dialogVisible) {
                this.openMyDialog();
              } else {
                this.closeMyDialog();
              }
            }
          })
        }
      } else {
        this.dialogVisible = true;
        this.openMyDialog();
      }
    },
    /**
     * 调用IDM提供的内置关闭方法
    */
    closeMyDialog(isOk) {
      window.IdmBuiltin_CloseDialog({
        targetModule: [{ moduleId: this.moduleObject.packageid, moduleName: this.moduleObject.asName }],
        isOkEvent: isOk
      })
    },
    /**
     * 调用IDM提供的内置打开方法
    */
    openMyDialog(isOk) {
      window.IdmBuiltin_OpenDialog({
        targetModule: [{ moduleId: this.moduleObject.packageid, moduleName: this.moduleObject.asName }],
        isOkEvent: isOk
      })
    },
    // 打开当前弹窗
    openThisDialogHandle() {
      this.dialogVisible = true;
    },
    // 关闭当前弹窗
    closeThisDialogHandle() {
      this.dialogVisible = false;
    },
    /**
     * 组件通信：接收消息的方法
     */
    receiveBroadcastMessage(object) {
      if (object.type && object.type == "linkageOpenDialog" && this.hasId(object.rangeModule, this.moduleObject.packageid)) {
        this.openThisDialogHandle();
      } else if (object.type && object.type == "linkageCloseDialog" && this.hasId(object.rangeModule, this.moduleObject.packageid)) {
        this.closeThisDialogHandle();
      }
    },
    // 判断数组中是否有无 id
    hasId(arr, id) {
      console.log('arr=====', arr, id)
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] == id) {
          return true;
        }
      }
      return false;
    },
    propDataWatchHandle(propData) {
      this.propData = propData.compositeAttr || {};
      this.init();
    },
    init () {
      console.log(this.propData, '数据源');
      this.handleStyle();
      this.initData();
      this.dialogVisible = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.dialogbox{
  width: 100%;
}
.dialogmsg-box{
  width: 100%;
  height: 100vh;
  position: relative;
  .dialogmsg-mask{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
  }
  .dialog-center{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url('../assets/msg.png') no-repeat;
    background-size: 100% 100%;
  }
  .dialog-close{
    width: 20px;
    height: 20px;
    background: url('../assets/close.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
  }
  .dialog-p{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .dialog-btn{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: url('../assets/btn.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
}
</style>

